<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
</script>
<template>
	<div class="main">
		<div class="tips-primary">
			<p>
				<el-icon style="color: #1890ff; margin-top: 3px; margin-right: 3px; font-size: 14px"><BellFilled /></el-icon>
				配置太复杂脑壳疼？ <span>联系客服代您设置～</span>
			</p>
		</div>
		<div class="guide">
			（1）登录 <a href="https://work.weixin.qq.com/" target="_blank">企业微信</a> 进入<b>【我的企业】页面，选择</b
			><b>【通讯录管理】</b>，在<b>【对外展示信息】</b>下选择<b>【修改】</b>
		</div>
		<img
			style="width: 964px"
			src="http://www.crmuu.com/moment-setting_3-1.dd102f85a890.png"
		/>
		<div class="guide">
			（2）选择<b>【添加自定义信息】</b>，添加名称可选<b>【朋 友 圈】</b
			>，不可直接设置<b>【朋友圈】</b>系统会提示内含敏感词汇不能提交成功哦～
		</div>
		<img
			style="width: 964px"
			src="http://www.crmuu.com/moment-setting_3-3.a419627c3782.png"
		/>
		<div class="guide">
			（3）设置成功后可在页面上看到<b>【朋 友 圈】</b
			>对外信息，保存更改即设置成功，保存更改后，当员工在企业微信移动端<b>【对外信息展示】</b>页面填写专属朋友圈链接后，微信用户即可在员工个人信息页查看朋友圈
		</div>
		<img
			style="width: 964px"
			src="http://www.crmuu.com/moment-setting_3-3.a419627c3782.png"
		/>
	</div>
</template>
<style lang="scss" scoped>
.main {
	width: 100%;
	padding-bottom: 16px;
	img {
		margin-left: -8px;
	}
	.tips-primary {
		max-width: 946px;
		padding: 8px 16px;
		background: #effaff;
		box-shadow: 0 2px 4px 0 transparent;
		border-radius: 2px;
		font-size: 13px;
		color: #000000a6;
		span {
			color: #1890ff;
			cursor: pointer;
		}
	}
	.guide {
		position: relative;
		margin: 16px 0;
		max-width: 946px;
		width: 100%;
		background: #f0f8ff;
		padding: 12px 28px 12px 34px;
		font-size: 14px;
		font-weight: 400;
		border-radius: 4px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
		a {
			text-decoration: none;
			color: #1890ff;
		}
	}
	.guide:before {
		position: absolute;
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background: #1890ff;
		content: '';
		display: block;
		left: 17px;
		top: 22px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
</style>
